<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>NativeObj Example</title>
		<script type="text/javascript">
			var bitmap1 = null,
				bitmap2 = null,
				bitmap = null,
				wc = null

			// H5 plus事件处理
			function plusReady() {
				bitmap1 = new plus.nativeObj.Bitmap('bmp1');
				bitmap1.load('bmp1.png', function() {
					console.log('bmp1.png load success!');
				}, function(e) {
					console.log('bmp1.png load failed! ' + JSON.stringify(e));
				});
				bitmap2 = new plus.nativeObj.Bitmap('bmp2');
				bitmap2.load('bmp2.png', function() {
					console.log('bmp2.png load success!');
				}, function(e) {
					console.log('bmp2.png load failed! ' + JSON.stringify(e));
				});
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// 原生动画
			function nativeAnimation() {
				// 开始动画
				var view = {
					bitmap: bitmap1,
					text: '主窗口',
					textStyles: {
						size: '28px',
						color: '#FF0000'
					},
					textRect: {
						top: '0px',
						left: '0px',
						width: '100%',
						height: '100px'
					}
				};
				var other = {
					bitmap: bitmap1,
					text: '副窗口',
					textStyles: {
						size: '22px',
						color: '#00FF00'
					},
					textRect: {
						top: '0px',
						left: '0px',
						width: '100%',
						height: '44px'
					}
				};
				plus.nativeObj.View.startAnimation({
					type: 'pop-in'
				}, view, other, function() {
					console.log('plus.nativeObj.View.startAnimation动画结束');
					// 关闭原生动画
					plus.nativeObj.View.clearAnimation();
				});
			}
			// 查找Bitmap对象
			function findBitmap() {
				var bitmap = plus.nativeObj.Bitmap.getBitmapById("test");
				if (bitmap) {
					alert("Success: " + bitmap.id);
				} else {
					alert("Can't find bitmap")
				}
			}

			function createBitmap() {
				wc = plus.webview.currentWebview();
				bitmap = new plus.nativeObj.Bitmap("test");
				// 将webview内容绘制到Bitmap对象中
				wc.draw(bitmap, function() {
					alert("绘制图片成功")
				}, function(e) {
					alert("绘制图片失败")
				});
			}

			function clear() {
				bitmap.clear();
			}

			function loadBase64Data() {
				bitmap.loadBase64Data(
					"",
					function() {
						alert("加载Base64图片数据成功");
					},
					function() {
						alert('加载Base64图片数据失败：' + JSON.stringify(e));
					});
			}

			function clearBitmap() {
				bitmap.recycle();
			}

			function base64Image() {
				var img = document.getElementById("img");
				img.src = bitmap.toBase64Data();
			}
			let view = null;

			function createView() {
				view = new plus.nativeObj.ImageSlider('test', {
					top: '400px',
					left: '0px',
					height: '200px',
					width: '100%',
					position: 'absolute',
					images: [{
						src: 'http://cheapbuy.store/h5/static/pages/images/shoppingcart.png'
					}, {
						src: "http://cheapbuy.oss-ap-southeast-1.aliyuncs.com/file/upload/shop/settled/20220426/ebcc47f5378142729ba22dd8a70b2475.gif?Expires=1966325635&OSSAccessKeyId=LTAI5tLSWUQ86fjzSYpYiw5w&Signature=tByQzBSMxBJvILJEEhrRHy7sEvo%3D"
					}, {
						src: 'http://cheapbuy.oss-ap-southeast-1.aliyuncs.com/file/upload/shop/settled/20220126/757624602405442f887d167ed2de85dc.png?Expires=1958539031&OSSAccessKeyId=LTAI5tLSWUQ86fjzSYpYiw5w&Signature=WNj4yUlcIxH%2BbV4JQhSAnrBqk2k%3D'
					}],
					autoplay: true,
					loop: true
				});
				view.show();
				// plus.webview.currentWebview().append(view);
			}

			function updateView() {
				// view.addImages([{
				// 	src: 'http://cheapbuy.oss-ap-southeast-1.aliyuncs.com/file/upload/shop/settled/20220126/42a7870f94cb44b28e40682b23bf0ec8.png?Expires=1958539031&OSSAccessKeyId=LTAI5tLSWUQ86fjzSYpYiw5w&Signature=GHuqm%2BrRCY8RWzcfQ0TesE18q0Y%3D'
				// }]);
				view.setImages([{
					src: 'http://cheapbuy.oss-ap-southeast-1.aliyuncs.com/file/upload/shop/settled/20220126/42a7870f94cb44b28e40682b23bf0ec8.png?Expires=1958539031&OSSAccessKeyId=LTAI5tLSWUQ86fjzSYpYiw5w&Signature=GHuqm%2BrRCY8RWzcfQ0TesE18q0Y%3D'
				}]);


			}


			function currentImage() {
				console.log(555)
				var index = view.currentImageIndex();
				alert(index);
			}


			function createInputView() {
				let view = new plus.nativeObj.View('testone', {
					top: '50px',
					left: '0px',
					height: '44px',
					width: '100%'
				});
				view.draw([{
						tag: 'input',
						id: 'input',
						inputStyles: {
							type:'number',
							fonstSize: '16px',
							borderColor:"#FF0000"
						},
						position: {
							top: '50px',
							left: '0px',
							width: '200px',
							height: '44px'
						}
					},
					{
						tag: 'font',
						id: 'font',
						text: '原生控件',
						textStyles: {
							size: '18px'
						}
					}
				]);
				view.show();
			}
		</script>
	</head>
	<body>
		<button onclick="nativeAnimation()">原生窗口动画</button><br />
		<button onclick="createBitmap()">创建Bitmap对象</button><br />
		<button onclick="findBitmap()">获取指定标识的Bitmap图片对象</button><br />
		<button onclick="clear()">销毁Bitmap图片</button><br />
		<button onclick="loadBase64Data()">加载Base64图片数据</button><br />
		<button onclick="clearBitmap()">回收Bitmap图片内存</button><br />
		<button onclick="base64Image()">获取图片的Base64编码数据</button><br />
		<img id="img"></img>
		<button onclick="createView()">创建图片轮播控件</button><br />
		<button onclick="updateView()">添加图片</button>
		<button onclick="currentImage()">获取当前显示的图片</button>
		<button onclick="createInputView()">创建带编辑框的原生View控件</button><br />
	</body>
</html>
